<template>
  <div>
    <div class="draggable-list">
      <div class="warpper">
        <!-- 显示图片-->
        <div class="imgDiv">
          <div
            class="item img-item"
            v-for="(item, index) in outImg"
            :key="index"
          >
            <img :src="item" :onerror="errorImg" />
            <div class="operation">
              <div class="action">
                <Icon
                  type="md-eye"
                  @click="previewImg(index)"
                  class="view"
                ></Icon>
                <Icon
                  type="md-close"
                  @click="delImgFun(index)"
                  class="remove"
                ></Icon>
              </div>
              <div class="mask"></div>
            </div>
            <!-- <a href="javascript:void(0)"><i class="el-icon-error" @click="delImgFun(index)"></i></a> -->
          </div>
          <div
            class="item img-select"
            @click="OpenPictureLibrary"
            v-if="outImg.length < maxFile"
          >
            <i class="el-icon-plus"></i>
          </div>
        </div>
      </div>
    </div>
    <vol-box
      :lazy="true"
      :model.sync="model.box1"
      title="文件管理"
      :height="500"
      :width="800"
      :padding="15"
    >
      <div>
        <div class="upload-wrap-inline mb16 clearfix">
          <div class="leval-item">
            <!-- <el-button type="default">添加分类<i class="el-icon-plus"></i></el-button>
            <el-button type="default">移动至<i class="el-icon-caret-bottom "></i></el-button>
            <el-button type="default">批量删除<i class="el-icon-delete"></i></el-button> -->
          </div>
          <div class="leval-item upload-btn">
            <el-upload
              :multiple="multiple"
              :show-file-list="false"
              :on-change="photoOnChange"
              :auto-upload="false"
              action=""
            >
              <!-- <img v-if="ruleForm.backgroundpic" :src="SRCL + ruleForm.backgroundpic" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
              <el-button type="primary"
                >点击上传<i class="el-icon-upload el-icon--left"></i
              ></el-button>
            </el-upload>
          </div>
        </div>
        <div class="fileContainer">
          <div class="file-type">
            <ul>
              <li
                @click="ClassificationClick(item, index)"
                :class="{ active: currentIndex == index }"
                class="item"
                v-for="(item, index) in ClassificationArray"
                :key="index"
              >
                {{ item.menuName }}
                <!-- <div class="operation">
                  <p><i class="el-icon-edit"></i></p>
                  <p class="el-icon-delete"></p>
                </div> -->
              </li>
            </ul>
          </div>
          <div class="file-content">
            <ul>
              <li
                class="file"
                v-for="(item, index) in PhotoArr"
                @click="PhotoClick(item, index)"
                :key="index"
              >
                <div
                  class="selectedIcon"
                  v-show="
                    (isShowClick = AllClick.indexOf(item) != -1 ? true : false)
                  "
                >
                  <i class="el-icon-check"></i>
                </div>
                <img :src="item.file_name" alt="图片" />
                <p>{{ item.save_name }}</p>
                <!-- <div class="bottom-shade">
                  <a href="javascript:void(0)"><i class="el-icon-delete"></i></a>
                </div> -->
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button type="default" @click="submit()">确认</Button>
        <Button type="default" @click="model.box1 = false">关闭</Button>
      </div>
    </vol-box>
    <slot name="tip"></slot>
  </div>
</template>

<script>
import VolForm from "@/components/basic/VolForm.vue";
import VolBox from "@/components/basic/VolBox.vue";
export default {
  components: {
    VolForm,
    VolBox
  },
  props: {
    fileInfo: {
      type: Array,
      default: () => {
        return [];
      }
    },
    multiple: {
      //是否多选
      type: Boolean,
      default: false
    },
    maxFile: {
      //最多可选文件数量
      type: Number,
      default: 1
    },
    maxSize: {
      //文件限制大小1MB
      type: Number,
      default: 10
    }
  },
  computed: {
    outImg() {
      return this.fileInfo == "" ? [] : this.fileInfo;
    }
  },
  data() {
    return {
      errorImg: 'this.src="' + require("@/assets/imgs/error-img.png") + '"',
      asgda: sessionStorage.getItem("pictureObj"),
      isShow: false,
      isShowClick: false,
      currentIndex: "0",
      AllClick: [],
      ClassificationArray: [],
      PhotoClickIndex: "",
      menu_Id: "0",
      model: {
        box1: false,
        box2: false,
        box3: false
      },
      fileURL: "",
      merchantCode: "",
      userName: "",
      PhotoArr: []
    };
  },
  created() {
    let userTypeInfo = JSON.parse(sessionStorage.getItem("sessionStorageUSER"));
    this.userName = userTypeInfo.itownuserName;
    this.merchantCode = userTypeInfo.merchantCode;
    this.fileURL = `https://fineapi.boss.i-town.cn/webroot/decision/view/report?viewlet=WorkBook2.cpt&fine_username=${this.userName}`;
  },
  mounted() {
    this.getMenu();
  },
  methods: {
    previewImg(index) {
      //查看大图预览模式待完
      this.base.previewImg(this.outImg[index]);
    },
    delImgFun(index) {
      this.outImg.splice(index, 1);
    },
    OpenPictureLibrary() {
      this.model.box1 = true;
      this.AllClick = [];
      this.photoOnList(0);
      this.getMenu();
    },
    ClassificationClick(val, index) {
      this.menu_Id = val.menu_Id;
      this.PhotoArr = [];
      this.photoOnList(this.menu_Id);
      this.currentIndex = index;
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.raw.type == "image/jpeg" ||
        file.raw.type == "image/png" ||
        file.raw.type == "image/gif" ||
        file.raw.type == "image/jpg";
      const isSize = file.size / 1024 / 1024 < 6;
      if (!isJPG) {
        this.$message.closeAll();
        this.$message.error("只支持JPG、JPEG、gif、PNG格式!");
      }
      if (!isSize) {
        this.$message.closeAll();
        this.$message.error("上传图片大小不能超过" + 6 + "MB!");
      }
      return isJPG && isSize;
    },
    photoOnChange(file) {
      var result = this.beforeAvatarUpload(file);
      if (!result) {
        return;
      }
      let formData = new FormData();
      formData.append("fileInput", file.raw);
      formData.append("type", this.menu_Id);
      formData.append("storage", "OSS");
      this.http
        .post("api/Small_user_distributors_system/Upload_OSS", formData)
        .then(res => {
          if (res.data.length > 0) {
            this.photoOnList(res.data[0].group_id);
          }
        });
    },
    photoOnList(val) {
      if (val == 0) {
        let param = {
          order: "desc",
          page: 1,
          rows: 20,
          sort: "id",
          wheres: `[{\"name\":\"storage\",\"value\":\"OSS\",\"displayType\":\"text\"}]`
        };
        let url = `/api/FuploadFile/getPageData`;
        this.http.post(url, param).then(res => {
          if (res.rows.length > 0) {
            this.PhotoArr = res.rows;
          }
        });
      } else {
        let param = {
          order: "desc",
          page: 1,
          rows: 20,
          sort: "id",
          wheres: `[{\"name\":\"storage\",\"value\":\"OSS\",\"displayType\":\"text\"},{\"name\":\"group_id\",\"value\":\"${val}\",\"displayType\":\"text\"}]`
        };
        let url = `/api/FuploadFile/getPageData`;
        this.http.post(url, param).then(res => {
          if (res.rows.length > 0) {
            this.PhotoArr = res.rows;
          }
        });
      }
    },
    PhotoClick(val, index) {
      if (this.AllClick.indexOf(val) !== -1) {
        this.AllClick.splice(this.AllClick.indexOf(val), 1); //取消
      } else {
        this.AllClick.push(val); //选中添加到数组里
      }
    },
    getMenu() {
      this.http.get("/api/menu/getOneLevelMenu").then(x => {
        this.ClassificationArray = x.data;
        let all = { menu_Id: 0, menuName: "全部" };
        this.ClassificationArray = [all, ...this.ClassificationArray];
      });
    },
    submit() {
      let num = this.outImg.length + this.AllClick.length;
      if (this.multiple && num > this.maxFile) {
        this.$Message.warning("最多选择" + this.maxFile + "张图片");
        return;
      } else if (num > this.maxFile) {
        this.$Message.warning("最多选择" + this.maxFile + "张图片");
        return;
      }
      if (this.AllClick.length > 0) {
        this.AllClick.forEach(i => {
          this.fileInfo.push(i.file_name);
        });
      }
      this.model.box1 = false;
    },
    downloadPdf(fileURL, fileName) {
      var link = document.createElement("a");
      link.href = fileURL;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>
<style>
.draggable-list > .warpper .imgDiv {
  display: flex;
  flex-wrap: wrap;
}
.draggable-list .item {
  position: relative;
  min-width: 110px;
  max-width: 110px;
  height: 110px;
  margin-right: 10px;
  margin-top: 10px;
  border-radius: 8px;
  /* overflow: hidden; */
  border: 1px solid #ddd;
}
.draggable-list .item > img {
  width: 100%;
  max-height: 100% !important;
  height: 100%;
}
.draggable-list .img-select {
  display: flex;
  justify-content: flex-start;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  border: 1px dashed #ddd;
  font-size: 30px;
}
.warpper {
  display: block;
}
[class*=" el-icon-"],
[class^="el-icon-"] {
  font-family: element-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}
.draggable-list .img-select i {
  color: #409eff;
}
.el-dialog__body {
  word-break: break-all;
}
.fileContainer {
  position: relative;
  padding-left: 120px;
  display: block;
}
.imgDiv .item .el-icon-error {
  display: none;
}
.imgDiv .item:hover .el-icon-error {
  display: block;
  color: red;
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 14px;
  z-index: 99;
}
.fileContainer .file-type {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  width: 120px;
  height: 400px;
}
.fileContainer .file-type ul {
  list-style: none;
  display: block;
  margin-block-start: 0px;
  margin-block-end: 10px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 25px;
}
.fileContainer .file-type li {
  cursor: pointer;
  text-align: center;
  padding: 13px 20px 13px 0;
  min-height: 20px;
  position: relative;
}
.fileContainer .file-type li .operation {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
}
.fileContainer .file-type li:hover .operation {
  display: block;
}
.fileContainer .file-content {
  height: 400px;
  text-align: center;
  overflow: hidden;
  padding: 10px;
  margin: 0;
  overflow-y: auto;
  border: 1px solid #c6c6c6;
  display: block;
}
.file-content ul {
  list-style: none;
  display: block;
  margin-block-start: 0px;
  margin-block-end: 10px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 20px;
}
.fileContainer .selectedIcon {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: #f90;
  z-index: 1;
  color: #fff;
  cursor: pointer;
  display: block;
}
.fileContainer .bottom-shade {
  position: absolute;
  bottom: 16px;
  background: rgba(0, 0, 0.7);
  height: 26px;
  line-height: 26px;
  width: 100%;
  color: #fff;
  display: none;
}
.fileContainer .file-content li:hover .bottom-shade {
  background: rgb(203, 192, 192);
  display: block;
}
.fileContainer li.file {
  float: left;
  margin: 10px 9px 0;
  position: relative;
  width: 100px;
}
.fileContainer li.file img {
  display: inline-block;
  width: 100px;
  height: 100px;
  cursor: pointer;
  background-size: cantain;
  background-repeat: no-repeat;
  background-position: 50%;
  background-color: #fff;
}
.fileContainer .bottom-shade a {
  color: #fff;
}
.mb16 {
  margin-bottom: 16px;
}
.upload-wrap-inline {
  height: 45px;
}
.upload-wrap-inline .leval-item {
  display: inline-block;
}
.upload-wrap-inline .upload-btn {
  float: right;
}
.fileContainer .file-type li.active {
  background: #b4b4b4;
  color: #fff;
}
.clearfix:after {
  visibility: hidden;
  clear: both;
}
</style>
<style lang="scss" scoped>
.imgDiv {
  .img-item:hover .operation {
    display: block;
  }
  .img-item,
  .img-selector {
    position: relative;
    cursor: pointer;
    float: left;
    width: 110px;
    height: 110px;
    border: 1px solid #c7c7c7;
    overflow: hidden;
    border-radius: 5px;
    .operation {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      .action {
        opacity: 0.6;
        text-align: right;
        background: #727779;
        font-size: 17px;
        position: absolute;
        z-index: 90;
        width: 100%;
        bottom: 3px;
        bottom: 0;
        color: #ded5d5;
        padding-right: 7px;
        padding-bottom: 3px;
        line-height: 23px;
        // i {
        //   border-radius: 50%;
        //   background: white;
        // }
      }
      .mask {
        opacity: 0.6;
        background: #9e9e9e;
        top: 0;
        width: 100%;
        height: 100%;
        position: absolute;
      }
    }
  }
}
::v-deep .avatar-uploader .el-upload {
  border-radius: 10px !important;
}
</style>
